<script setup lang="ts">
import { TreeComponentProps } from 'element-plus/es/components/tree/src/tree.type'

defineOptions({ name: 'VipTree' })

interface Props extends Partial<TreeComponentProps> {
}

const props = withDefaults(defineProps<Props>(), {
  nodeKey: '',
  props: () => {
    return {}
  },
  data: () => [],
})

const treeRef = ref()
const treeFilterText = ref<string>('')
watch(treeFilterText, (value) => {
  treeRef.value.filter(value)
})

const filterNode = (value: string, _: any, node: any) => {
  if (!value) return true
  // const node = { ...data } as DictTypeVO;
  // const targetText = data[`${props.props.label}`]
  const targetText = node.label
  return targetText.indexOf(value) !== -1
}

// const handleNodeClick = (_: any, node: any) => {
//   MittBusUtil.emit('on-dept-select', { 'id': node.key, 'label': node.label })
//   // console.log('handleNodeClick', { 'id': node.key, 'label': node.label })
// }

const getRef = () => treeRef.value
defineExpose({ getRef })

</script>

<template>
  <div class="vip-search-tree">
    <template v-if="$slots.header">
      <slot name="header"></slot>
    </template>
    <template v-else>
      <el-input v-model="treeFilterText" placeholder="搜索过滤" prefix-icon="Search" clearable></el-input>
    </template>
    <el-tree
      ref="treeRef"
      :node-key="nodeKey"
      :data="data"
      :props="props.props"
      :expand-on-click-node="false"
      highlight-current
      default-expand-all
      :filter-node-method="filterNode"
      v-bind="$attrs"
      style="height: 100%"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          <span class="label">{{ node.label }}</span>
          <!--          <span class="info-count"> (10) </span>-->
        </span>
        <!--        <span>{{ node.label }}</span>-->
        <!--        <a v-if="!data.children" @click="remove(node, data)">删除</a>-->
      </template>
    </el-tree>
  </div>
</template>

<style scoped lang="scss">
.vip-search-tree {
  display: flex;
  flex-direction: column;
  //flex: 1;
  //overflow: hidden;
  height: 100%;

  .custom-tree-node {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
    padding-right: 24px;
    padding-top: var(--el-padding);
    padding-bottom: var(--el-padding);
    height: 100%;
  }

  .custom-tree-node .info-count {
    font-size: 12px; /* 调整字体大小 */
    color: #888; /* 设置字体颜色 */
  }

  :deep() {
    .el-tree {
      //margin-top: var(--el-margin);
      height: 100%;

      &-node__label {
        //display: block;
        //width: 100%;
      }

      &-node__content {
        //padding: 10px 0;

        a {
          position: absolute;
          right: 5px;
        }
      }
    }
  }

  :deep(.el-tree--highlight-current) {
    .el-tree-node.is-current > .el-tree-node__content {
      background-color: var(--el-color-primary-light-9);

      .el-tree-node__label,
      .el-tree-node__expand-icon {
        color: white;
      }

      .is-leaf {
        color: transparent;
      }
    }
  }
}
</style>
